import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import Scrollspy, { Easing } from 'vue2-scrollspy'

import PageBanner from './components/PageBanner'
import { ValidationProvider, extend,ValidationObserver } from 'vee-validate'
import { required,confirmed,length } from 'vee-validate/dist/rules'
import VModal from 'vue-js-modal'

extend('required', {
  ...required,
  message: '{_field_} is required.'
})
extend('length', {
  ...length,
  message: 'The {_field_} field may not be greater than 4 characters',
})
extend('confirmed', {
  ...confirmed,
  message: 'The {_field_} field confirmation does not match'
})
extend('email', val => {
  const regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  if (!regEmail.test(val)) {
    return 'Email address invalid.'
  } else {
    return true
  }
})
extend('min', {
  validate(value, {min}) {
    if (value.length < min) {
      return `{_field_} must be ${min} characters at least.`
    } else {
      return true
    }
  },
  params: ['min']
})

Vue.component('Validater', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
Vue.component('Footer', Footer)
Vue.component('Header', Header)
Vue.component('PageBanner', PageBanner)
Vue.config.productionTip = false;

Vue.use(VModal, {
  dialog: true,
})

Vue.use(Scrollspy, {
  easing: Easing.Cubic.In
})
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');
